<script setup>
import {computed, onMounted, ref} from "vue";
import {SelectResume} from "@/utils/api/enterprise.js";
import {useUserLoginStore} from "@/stores/AccountLogin.js";
import {ElMessage} from "element-plus";

const name = ref("");
const major = ref("");
const eno = useUserLoginStore().getAccount;
const data = ref([{
  name: '',
  gender: 0,
  major: '',
  phone: '',
  jobId: '',
  resume: '',
  opTime: '',
}]);

const genderFormat = (gender) => {
  return (gender === 1 || gender === '1') ? '男' :
      (gender === 2 || gender === '2') ? '女' : '--';
}

const select = () => {
  data.value = [];
  SelectResume(name.value, major.value, eno)
      .then(result => {
        if (result.code === 1) {
          data.value = result.data;
        } else {
          ElMessage({
            message: "服务器错误",
            type: 'warning'
          })
        }
      }).catch(error => console.error(error.toString()));
}

onMounted(() => {
  select();
})
</script>

<template>
  <div class="main">
    <el-form inline>
      <el-form-item label="姓名">
        <el-input type="text" v-model="name" placeholder="姓名"/>
      </el-form-item>
      <el-form-item label="专业">
        <el-input type="text" v-model="major" placeholder="专业"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="select">筛 选</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="data" border stripe preserve-expanded-content>
      <el-table-column type="expand">
        <template #default="scope">
          <div style="padding-left: 50px; color: black;">
            简历信息：<br>{{ scope.row.resume }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column label="性别">
        <template #default="scope">
          {{ genderFormat(scope.row.gender) }}
        </template>
      </el-table-column>
      <el-table-column prop="major" label="专业"/>
      <el-table-column prop="phone" label="联系方式"/>
      <el-table-column prop="jobId" label="投递职位Id"/>
      <el-table-column prop="opTime" label="投递日期"/>
    </el-table>
  </div>
</template>

<style scoped>
.main {
  min-width: 1100px;
  max-height: 500px;
}

.el-table {
  min-width: 1000px;
  max-height: 450px;
}
</style>